<template>
<div>
    <el-card class="box-card">
         <el-button type="primary" @click="setReceiptTime(1)">新增</el-button>
         <div class="headerBox">
             <div class="box"></div>
             <div class="title">收款时间设置</div>
         </div>
        <div class="table">
         <el-table
            :data="dataList"
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
            type="index"
            label="序号"
            width="50">
            </el-table-column>
              <el-table-column
            prop="startTime"
            label="开始时间"
            width="280">
            </el-table-column>
              <el-table-column
            prop="endTime"
            label="结束时间"
            width="280">
            </el-table-column>
              <el-table-column
            prop="wechatMchName"
            label="商户"
            width="350">
            <template slot-scope="scope">
               <span :class="scope.row.wechatMchStatus==1?'active':''">{{scope.row.wechatMchName}}</span>
            </template>
            </el-table-column>
                <el-table-column
            prop="commTypeList"
            label="品牌"
            width="390"
             :show-overflow-tooltip='true'>
            <template slot-scope="scope" >
                 {{parseBranchName(scope.row) }}
            </template>
            </el-table-column>
              <el-table-column
            label="操作"
           
            width="280">
             <template slot-scope="scope">
                <el-button @click="compile(scope.row,2)" type="text" size="small" >编辑</el-button>
                <el-button @click="handleClick(scope.row)" type="text" size="small" >删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        </div>
    </el-card>
    <el-dialog
        :title="title"
        :append-to-body="true"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商户号"  >
                <el-select v-model="ruleForm.wechatMchId" placeholder="请选择商户号">
                    <el-option v-for="item in merchantList " :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间"  prop="checkPass">
                <el-date-picker
                    :clearable="false"
                    v-model="ruleForm.time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    unlink-panels
                    :default-time="['00:00:00', '23:59:59']"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions1"
                    >
                    </el-date-picker>
            </el-form-item>
             <el-form-item label="品牌" >
                <el-select v-model="ruleForm.commTypeIds" multiple  placeholder="请选择品牌" :disabled="show">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-checkbox-group v-model="ruleForm.matchAll" @change="getMatchAll">
                    <el-checkbox label="全选" :true-label="1" :false-label="0"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <div class="btnBox">
                <el-button  @click="dialogVisible=false">取消</el-button>
                <el-button  type="primary" @click="submitForm()">确定</el-button>
            </div>
               
        </el-form>
    </el-dialog>
     <div class="page">
            <div class="block">
                <el-pagination 
                @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalNum"
                    prev-text="上一页"
                    next-text="下一页">
                </el-pagination>
            </div>
        </div>
</div>
</template>

<script>
export default {
    data() {
      return {
        dataList:[],
        state:'',
        merchantList:[],//商户号数据
        currentPage1:1,
        pageSize:10,
        title:"",
        totalNum:0,
        brandList:[],//品牌数据
        startTime:"",
        endTime:"",
        show:false,
        id:"",
         pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
        ruleForm: {
          time:[],
          startTime: '',
          wechatMchId: '',
          commTypeIds: [],
          endTime:"",
          matchAll:0,
        },
          dialogVisible:false,
      }
    },
    created(){
        this.getDataList()
        this.getBrandList()
        
    },
     methods: {
        
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    //   分页
      handleCurrentChange(val){
        this.currentPage1 = val;
        this.getDataList()
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.getDataList()
      },
    //   新增
      setReceiptTime(e){
          this.getMerchantList()
          this.title="新增"
          this.state =e
           this.ruleForm.time = []
            this.ruleForm.startTime=""
            this.show=false
            this.ruleForm.wechatMchId=""
            this.ruleForm.commTypeIds=""
            this.ruleForm.endTime=""
            this.ruleForm.matchAll=0
          this.dialogVisible=true;
          
      },
      handleClose(done){
           done();
      },
    //   删除
      handleClick(row){
           this.$confirm('此操作将永久删除该商户号收款设置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             console.log(row)
          this.axios.post(`/pay/wechatMchSchedule/delete?id=${row.id}`).then(res=>{
              console.log(res)
             if(res.code==0){
                this.getDataList()
                this.$message({
                message: '删除成功',
                type: 'success'
                });
            }else{
                this.$message.error(res.message);
            }
          })
        }).catch(() => {
                   
        });
         
      },
    //   数据列表
    getDataList(){
        this.axios.post("/pay/wechatMchSchedule/selectList",{
            pageNo: this.currentPage1,
            pageSize: this.pageSize,
        }).then(res=>{
            console.log(res)
            if(res.code==0){
                this.dataList=res.data.list;
                this.totalNum = res.data.totalNum
                
            }
        })
    },
     parseBranchName(order){
            var brandList = [];
            var commTypeList = order.commTypeList;
            for(var ci1 in commTypeList){
                var c = commTypeList[ci1];
                if(brandList.indexOf(c.name) == -1){
                    brandList.push(c.name);
                }
            }
            var orderComplimentaryList = order.orderComplimentaryList;
            for(var ci1 in orderComplimentaryList){
                var c = commTypeList[ci1];
                if(brandList.indexOf(c.name) == -1){
                    brandList.push(c.name);
                }
            }
            var branchName = "";
            if(brandList.length==0){
                 return branchName;
            }else{
                 for(var i in brandList){
                var b = brandList[i];
                branchName += b;
                branchName += "、";
            }
            return branchName.substring(0,branchName.length - 1);
            }
           
        },
    // 品牌数据
    getBrandList(){
        this.axios.get('/order/comm/commodity/selectList').then(res=>{
            if(res.code==0){
                this.brandList = res.data.map((item)=>{
                    return{
                        name:item.name,
                        id:item.id
                    }
                })
                // console.log(this.brandList)
            }
        })
    },
     // 商户号数据
    getMerchantList(){
        this.axios.get('/pay/wechatMch/selectOption').then(res=>{
            console.log(res)
            if(res.code==0){
                this.merchantList=res.data
            }
        })
    },
    //新增商户号
    submitForm(){
        if(this.state ==1){
            if (this.ruleForm.time) {
        this.startTime = this.ruleForm.time[0];
        this.endTime = this.ruleForm.time[1];
        }
            this.axios.post('/pay/wechatMchSchedule/add',{
            commTypeIds:this.ruleForm.commTypeIds,
            endTime: this.endTime,
            matchAll:0,
            startTime: this.startTime,
            wechatMchId: this.ruleForm.wechatMchId,
        }).then(res=>{
            if(res.code==0){
                this.dialogVisible=false;
                this.getDataList()
                this.$message({
                message: '添加成功',
                type: 'success'
                });
            }else{
                this.$message({
                message: res.message,
                type: 'warning'
        });
            }

            })
        }else {
          
            if (this.ruleForm.time) {
        this.startTime = this.ruleForm.time[0];
        this.endTime = this.ruleForm.time[1];
        }
            this.axios.post('/pay/wechatMchSchedule/update',{
            commTypeIds:this.ruleForm.commTypeIds,
            endTime: this.endTime,
            matchAll:0,
            startTime: this.startTime,
            wechatMchId: this.ruleForm.wechatMchId,
            id:this.id
        }).then(res=>{
            if(res.code==0){
                this.dialogVisible=false;
                this.getDataList()
                this.$message({
                message: '修改成功',
                type: 'success'
        });
            }else{
                this.$message({
                message: res.message,
                type: 'warning'
        });
            }

            })
        
        }
        
    },
    //编辑
    compile(row,e){
         this.ruleForm.time=[]
         
        this.state=e
        this.title="编辑"
        this.dialogVisible=true
        console.log(row)
       
        if(row.commTypeList){
             this.ruleForm.commTypeIds= row.commTypeList.map(res=>{
                return res.id
        })
        }else{
            this.ruleForm.commTypeIds=row.commTypeList
        }
        console.log(row);
        
        this.ruleForm.time[0]=row.startTime,
        this.ruleForm.wechatMchId=row.wechatMchId+"",
        this.ruleForm.time[1]=row.endTime,
        console.log(this.ruleForm.time,'this.ruleForm.time')
        this.ruleForm.matchAll=0
        this.id=row.id
        this.getMerchantList()
        this.$forceUpdate()

    },
    getMatchAll(e){
        console.log(e)
        if(e==1){
            this.show=true
            // this.ruleForm.commTypeIds=[]
           this.ruleForm.commTypeIds=this.brandList.map(item=>{
                return item.id
                
            })
            console.log(this.ruleForm.commTypeIds)
        }else {
            this.show=false
            this.ruleForm.commTypeIds=[]
        }
    }
    },
}
</script>
<style lang="scss">
    .el-tooltip__popper{max-width:20%}
</style>
<style scoped lang="scss">



 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    position: relative;
    width: 100%;
    height: 100%;
  }
 

 .page {
    // margin: 20px 0;
    padding-right: 20px;
    text-align: right;
    width: 98%;
    margin-top: 30px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: #f4f4f4;

    span {
        font-size: 15px;
        color: #666;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }

    .el-pagination {
        display: inline-block;
        vertical-align: middle;
    }

    /deep/.el-input--suffix .el-input__inner {
        background: #fff;
        color: #000;
        width: 104px;
        box-shadow: none;
    }

}
.active{
    color: red;
}
.btnBox{
  display: flex;
  justify-content: right;
}
/deep/.el-dialog{
    border-radius: 10px;
}
.headerBox{
    margin-top: 50px;
    margin-bottom: 25px;
    display: flex;
    justify-content: left;
    align-items: center;
    .box {
        width: 4px;
        height: 16px;
        background: #4C81EB;
        opacity: 1;
    }
    .title{
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 31px;
        color: #333333;
        opacity: 1;
        margin-left: 8px;
        
    }
}
/deep/.el-form-item__content{
    display: flex;
}
/deep/.el-checkbox{
    margin-left: 20px;
}
.table {
    margin: 10px 0 0px;
    overflow-x: scroll;

   
}

 
</style>